<template>
  <div class="service" :style="{ minHeight: nodeHeight + 'px' }">
    <div class="head bor">
      <div class="title">
        <MyLine></MyLine>
        <span class="bold">自助服务</span>
      </div>
      <div class="list">
        <div class="item" v-for="(item, index) in listData" :key="index" @click="goHelpCenter(item.type)">
          <img :src="item.path" :alt="item.title">
          <span class="f14">{{ item.title }}</span>
        </div>
      </div>
    </div>
    <div class="problem bor">
      <div class="title">
        <MyLine></MyLine>
        <span class="bold">猜你想问</span>
      </div>
      <div class="list">
        <div class="item flex" v-for="(item, index) in array" :key="item.id" @click="goAnsweringDoubts(item.id)">
          <span class="f14">{{ (index + 1) + '.' + item.article_title }}</span>
          <img src="@/assets/images/more.png">
        </div>
      </div>
    </div>
    <HelpButton></HelpButton>
    <loading v-show="!array.length"></loading>
  </div>
</template>
<script>
import eventBus from "@/common/event-bus";
import { listData } from "@/common/serviceList"
import Line from "@/components/Line.vue";
import HelpButton from "@/components/Service/HelpButton.vue"
export default {
  name: "ServiceView",
  components: {
    MyLine: Line,
    HelpButton
  },
  data() {
    return {
      array: [],
      listData,
      nodeHeight: 0,
    }
  },
  created() {
    this.getDataList();
    eventBus.$emit("correctPath", "/service");//NavigationBar.vue
  },
  methods: {
    getDataList() {
      this.$sendGet("Help/getCommonProblemType?type")
        .then(res => {
          const { data } = res.data;
          this.array.push(...data)
        })
    },
    goAnsweringDoubts(id) {
      this.$router.push({ name: "doubts", query: { id } })
    },
    goHelpCenter(type) {
      if (typeof type === 'number') {
        this.$router.push({ name: "help", query: { type } })
      } else {
        this.$router.push({ name: type })
      }
    },
  },
  mounted() {
    const windowHeight = localStorage.getItem("windowHeight");
    const chunkHeight = localStorage.getItem("chunkHeight");
    this.nodeHeight = windowHeight - chunkHeight;
  }
}
</script>
<style lang="scss" scoped>
.bor {
  border-radius: 10px;
  overflow: hidden;
}

.service {
  padding: 15px;
  background-color: #f7f7f7;
  position: relative;

  .head {
    background-color: white;
    padding: 10px;
    margin-bottom: 15px;

    .title {
      display: flex;
      align-items: center;

      span {
        margin-left: 5px;
      }
    }

    .list {
      display: flex;
      margin-top: 10px;

      .item {
        flex-basis: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .problem {
    background-color: white;
    padding: 10px;
    margin-bottom: 15px;

    .title {
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #ececec;

      span {
        margin-left: 10px;
      }
    }

    .list {
      .item {
        padding: 12px 0;
        border-bottom: 1px solid #ececec;

        span {
          color: #c5c5c5;
        }

        img {
          width: 5px;
          object-fit: contain;
        }
      }
    }
  }


}
</style>